<template>
  <div class="setting">
    <a-tabs
      :default-active-key="currentIndex"
      tab-position="left"
      @tabClick="headleClick"
    >
      <a-tab-pane v-for="(item, index) in list" :key="index" :tab="item.name">
        <component :is="list[currentIndex].component" ></component>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import SystemSetup from "@/components/setting/SystemSetup";
import Cosmopolis from "@/components/setting/Cosmopolis";
import SeoSet from "@/components/setting/SeoSet";
import DataStatistics from "@/components/setting/DataStatistics";
import OssSet from "@/components/setting/OssSet";
import SmtpServe from "@/components/setting/SmtpServe";
export default {
  data() {
    return {
      currentIndex: 0,
      list: [
        {
          name: "系统设置",
          component: SystemSetup,
        },
        {
          name: "国际化设置",
          component: Cosmopolis,
        },
        {
          name: "SEO设置",
          component: SeoSet,
        },
        {
          name: "数据统计",
          component: DataStatistics,
        },
        {
          name: "OSS设置",
          component: OssSet,
        },
        {
          name: "SMTP服务",
          component: SmtpServe,
        },
      ],
    };
  },
  methods: {
    headleClick() {
      this.currentIndex=arguments[0]
      console.log(arguments, "arguments...",this.currentIndex);
    },
  },
};
</script>

<style lang="scss" scoped>
.setting {
  background: #eee;
  padding-top: 10px;
  .ant-tabs {
    margin: 0 auto;
    width: 97%;
    background: #fff;
  }
}
</style>
